<template>
    <div class="file" :class="{'active' : activeId == apiValue.id}" @mousedown="keyDown($event)" @mouseup="keyUp">
        <div class="file-box">
            <span class="state"
                :class="apiValue.status ||apiValue.status == 0  ? stateNumArray[apiValue.status] : 'noState'">
                <i class="el-icon-caret-right"></i>
            </span>
            <span class="file-type" :class="apiValue.type">{{apiValue.type.toLocaleUpperCase()}}</span>
            <span class="file-title">{{apiValue.title}}</span>
        </div>
        <div class="moveMark" v-if="apiMoveModule">
            <div class="TopMoveMark" @mouseover.stop="mouseover('TopMoveMark')" @mouseout.stop="mouseout">
                <moveLine v-if="moveActiveObject && TopMoveMark && moveActiveObject.id == apiValue.id"></moveLine>
            </div>
            <div class="BottomMoveMark" @mouseover.stop="mouseover('BottomMoveMark')" @mouseout.stop="mouseout">
                <moveLine v-if="moveActiveObject && BottomMoveMark && moveActiveObject.id == apiValue.id"></moveLine>
            </div>
        </div>
    </div>
</template>
<script>
    import { mapState } from "vuex";
    import moveLine from "./moveLine"

    export default {
        props: ['apiValue', 'openParentFolder'],
        components: {
            moveLine
        },
        data() {
            return {
                stateNumArray: ['preparation', 'underway', 'BUG', 'complete', 'deprecated'],
                active: false,
                TopMoveMark: false,
                BottomMoveMark: false,
            }
        },
        computed: {
            ...mapState("ApiActive", {
                activeId: state => state.activeId,
            }),
            ...mapState("Tree", {
                apiMoveModule: state => state.apiMoveModule,
                moveActiveObject: state => state.moveActiveObject,
            })
        },
        watch: {
            activeId(newValue) {
                if (this.apiValue.id == newValue) {
                    this.openParentFolder();
                };
            },
        },
        methods: {
            mouseover(type) {
                if (this.apiMoveModule) {
                    this.$store.dispatch('Tree/setMoveActiveObject', this.apiValue);
                };
                this.TopMoveMark = false;
                this.BottomMoveMark = false;
                this[type] = true;
                this.$store.dispatch('Tree/setApiMoveType', type);
            },
            mouseout() {
                if (this.apiMoveModule) {
                    this.$store.dispatch('Tree/setMoveActiveObject', null);
                    this.$store.dispatch('Tree/setApiMoveType', null);
                };
            },
            keyDown(event) {
                let X = event.clientX;
                let Y = event.clientY;
                document.onmousemove = (event) => {
                    if (!this.apiMoveModule) {
                        if (Math.abs(X - event.clientX) > 10 || Math.abs(Y - event.clientY) > 10) {
                            this.$store.dispatch('Tree/setApiMoveModule', true);
                        };
                    };
                    this.$store.dispatch('Tree/setMoveObject', {
                        id: this.apiValue.id,
                        x: event.clientX + 30,
                        y: event.clientY + 10,
                        title: this.apiValue.title,
                    });
                };
                document.onmouseup = () => {
                    if (this.apiMoveModule) {
                        this.$store.dispatch('Tree/checkMove');
                    };
                    this.$store.dispatch('Tree/setMoveActiveObject', null);
                    this.TopMoveMark = false;
                    this.BottomMoveMark = false;

                    this.$store.dispatch('Tree/setApiMoveModule', false);
                    this.$store.dispatch('Tree/setMoveObject', {
                        id: null,
                        x: -100,
                        y: -100,
                        title: '',
                    });
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            },
            keyUp() {
                if (!this.apiMoveModule) {
                    this.$store.dispatch('ApiActive/setActiveId', this.apiValue.id)
                };
            }
        },
    }
</script>